<template>
	<view>
		<view><u-tabs-swiper ref="uTabs" :list="list" 
		:current="current" @change="tabsChange" 
		:is-scroll="false" swiperWidth="750"
		:show-bar="false" 
		:active-item-style="activeStyle"
		fontSize="16"
		></u-tabs-swiper></view>
		<swiper class="swipers" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
			<swiper-item class="swiper-item"  style="height: 1500rpx;width: 750rpx;">
				<scroll-view scroll-y style="height: 100%;width: 750rpx;" >
					<!-- 第一个界面 -->
				
                 <firstMain></firstMain>
				 <firstMain></firstMain>
				 <firstMain></firstMain>
				 <firstMain></firstMain>
				 <firstMain></firstMain>
				 <firstMain></firstMain>
				 <firstMain></firstMain>
				 <firstMain></firstMain>
				 <firstMain></firstMain>
				 <firstMain></firstMain>
					<!--  -->
				</scroll-view>

				<!--  -->
			</swiper-item>
			<!-- 第二个界面 -->
			<swiper-item class="" style="height: 1500rpx;width: 750rpx;">
				<scroll-view scroll-y style="height: 100%;width: 750rpx;" >
				<view class="swipertop">
					<view class="bases">
						<u-icon name="bookmark-fill"></u-icon>
						<text class="">基本信息</text>
					</view>

					<view class="box1">
						<view class="">商机标题</view>
						<text class="blackcolor">{{details.title}}</text>
					</view>
					<view class="box1">
						<view class="">关联客户</view>
						<text class="blackcolor" style="color:#0079FE ;">{{details.company}}</text>
					</view>
					<view class="box1">
						<view class="">负责销售</view>
						<text class="blackcolor" style="color:#0079FE ;">{{details.charge}}</text>
					</view>

					<view class="box1">
						<view class="">预计销售金额</view>
						<text class="blackcolor">{{details.money}}</text>
					</view>

					<view class="box1">
						<view class="">销售阶段</view>
						<text class="blackcolor">{{details.range}}</text>
					</view>

					<view class="box1">
						<view class="">成交几率</view>
						<text class="blackcolor">{{details.odds}}</text>
					</view>

					<view class="box1">
						<view class="">商机来源</view>
						<text class="blackcolor">{{details.sources}}</text>
					</view>

					<view class="box1">
						<view class="">添加日期</view>
						<text class="blackcolor">{{details.cdate}}</text>
					</view>
					<view class="box1">
						<view class="">备注信息</view>
						<text class="blackcolor">{{details.remark}}</text>
					</view>
					
				</view>
				<!--  -->
				
				
				</scroll-view>
			</swiper-item>
			<!-- 第三个界面-->
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="height: 100%;width: 750rpx;" >
					<thridMain :product="product"></thridMain>
					
				</scroll-view>
			</swiper-item>

			
		</swiper>
	</view>
</template>

<script>
import thridMain from '../components/custabs-thirdmain/custabs-thirdmain.vue';
import firstMain from '../components/custabs-firstmain/custabs-firstmain.vue';
export default {
	props:['details','product'],
	data() {
		return {
			list: [
				{
					name: '商机动态'
				},
				{
					name: '资料详情'
				},
				{
					name: '展示内容'
				}
			],
			

			// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
			current: 0, // tabs组件的current值，表示当前活动的tab选项
			swiperCurrent: 0,
			activeStyle:{
				color:'#3478F7',
				boder:'1px solid #3478F7',
				fontSize:'16rpx'
			}
		};
	},
	components: {
		thridMain,
		firstMain
	},
	methods: {
		tabsChange(index) {
			this.swiperCurrent = index;
		},
		transition({ detail: { dx } }) {
			/* this.$refs.tabs.setDx(dx); */
		},

		animationfinish(e) {
			let current = e.detail.current;
			this.$refs.uTabs.setFinishCurrent(current);
			this.swiperCurrent = current;
			this.current = current;
		},
		// scroll-view到底部加载更多
		onreachBottom() {}
	}
};
</script>

<style lang="scss" scoped>

.swipers {
	width: 750rpx;
	height: 1500rpx;
	font-size: 12px;
	font-weight: normal;
}
.swipertop {
	width: 750rpx;
	height: 1000rpx;
	.bases {
		line-height: 100rpx;
		background-color: #ddd;
		padding-top: 20rpx;
		padding-left: 20rpx;
	}
	.box1 {
		width: 750rpx;
		height: 100rpx;
		padding: 0 20rpx;
		display: flex;
		justify-content: space-between;
		color: #999999;
		font-size: 12px;
		line-height: 100rpx;
		border-top: 1px solid #ddd;
		.blackcolor {
			color: #000000;
		}
	}
	.boxnull {
		width: 750rpx;
		height: 300rpx;
		background-color: #eee;
	}
}

.fourthmain {
	background-color: #eee;
	width: 750rpx;
	height: 600rpx;
	padding: 10rpx 10rpx;
	.fourthmessage {
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;
		padding: 10rpx 20rpx;
		background-color: #ffffff;
	}
}
</style>
